import React,{useState,useEffect} from 'react'
import ReactDOM from 'react-dom'

function Counter(){
	const [count,setCont]=useState(0);
	const [time,setTime]=useState(new Date().getTime());
	const increment=()=>{
		setCont(count=>count+1);
	}
	const decrement=()=>{
		setCont(count=>count-1);
	}
	const destroy=()=>{
		ReactDOM.unmountComponentAtNode(document.getElementById('app'))
	}
	useEffect(()=>{
		console.log('组件加载')
		const timer=setInterval(()=>{
			setTime(time=>time=new Date().getTime())
		},100)
		return ()=>{
			console.log('销毁组件');
			clearInterval(timer)
		}
	},[])
	return (
		<div className="container">
			<div className="wrapper">
				<h4 className="display-4 text text-danger">当前时间{time}</h4>
				<h4 className="display-4">{count}</h4>
				<button onClick={increment} className="btn btn-primary">自增</button>
				<button onClick={decrement} className="ml-2 btn btn-danger">自减</button>
				<button onClick={destroy} className="ml-2 btn btn-info">销毁组件</button>
			</div>
		</div>
	)
}

export default Counter